<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <style>
            .highcharts-axis-resizer {
                stroke: #eee;
            }
            .highcharts-axis-resizer:hover {
                stroke: #ccc;
            }
        </style>
    </head>
    <body>
        <div id="container" style="min-width:520px;height:520px"></div>
        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://img.hcharts.cn/highstock/highstock.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
        <script>
            $.getJSON('get_trade.php', function (data) {
                if(data.code !== 200) {
                    alert('读取数据失败！');
                    return false;
                }
                data = data.data;
                // 去掉多余的数据
                Highcharts.each(data, function(d) {
                    d.length = 2;
                });
                // 配置
                Highcharts.setOptions({global:{useUTC:false}});
                // Chart
                Highcharts.stockChart('container', {
                    rangeSelector: {
                    buttons: [{
                            type: 'hour',
                            count: 1,
                            text: '1h'
                        },{
                            type: 'day',
                            count: 1,
                            text: '1d'
                        }, {
                            type: 'week',
                            count: 1,
                            text: '1w'
                        }, {
                            type: 'month',
                            count: 1,
                            text: '1m'
                        }, {
                            type: 'year',
                            count: 1,
                            text: '1y'
                        }, {
                            type: 'all',
                            text: 'All'
                        }],
                        selected: 2,
                        inputEnabled: false,
                    },
                    title: {
                        text: 'CEO平台成交额(24h)'
                    },
                    plotOptions: {
                        series: {
                            showInLegend: true
                        }
                    },
                    tooltip: {
                        split: false,
                        shared: true
                    },
                    series: [{
                        // type: 'line',
                        id: 'ceo_trade',
                        name: 'CEO平台成交额',
                        data: data
                    }]
                });
            });
        </script>
    </body>
</html>